<template>
  <div class="w-[100%] h-[100%]">

    <div class="mt-[0px]">
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="true" @query="handleSearchQuery"
                   :show-export="false"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        pk="id"
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
        :show-expand="true"
        :show-section="false"
      >

        <template #expand="{row}">

          <QueryTable
            pk="id"
            :list="row.purchaseOrderDetailRespVOList"
            :total="0"
            :btns="tableBtnList"
            @execute="handleBtnClick"
            v-model="queryParams"
            :thead="thSub"
            :show-action="false"
            :show-expand="false"
          >
            <template #cover="{row}">
              <ImagePreview :src="row.cover" width="50px" height="50px"/>
            </template>

            <template #name="{row}">
              <span class="text-[#3721FF] cursor-pointer" v-copyText="row.name">{{
                  row.name
                }}</span>
            </template>


            <template #spec="{row}">
              <span>{{ row.color }}，{{ row.spec }}</span>
            </template>

          </QueryTable>

        </template>

        <template #createTime="{row}">
            <div>
              <div>采购时间：{{ dayjs( row.purchaseDate ).format('YYYY-MM-DD HH:mm:ss')}}</div>
              <div>创建时间：{{  dayjs( row.createTime ).format('YYYY-MM-DD HH:mm:ss') }}</div>
            </div>
        </template>


        <template #totalPurchaseAmount="{row}">
          <div>￥{{ row.totalPurchaseAmount }}</div>
        </template>


        <template #department="{row}">
          <div>
            <span>{{ row.productDeptName }}</span><span class="text-[#999999]">/{{
              row.purchaseName
            }}</span>
          </div>
        </template>
      </QueryTable>

    </div>
    <OrderDetail v-model="isShowDialog" :info="selectedRow"/>
  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import OrderDetail from "@/views/purchase/order/components/OrderDetail.vue";
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import {PurchaseOrderApi} from "@/api/purchase/order";
import dayjs from "dayjs";

const searchList: TradeOrderQueryVO[] = [
  {
    label: '采购订单号',
    code: 'id',
    type: 'input'
  },

  {
    label: '采购渠道',
    code: 'purchasingChannels',
    type: 'select',
    options: [
      {
        label: "1688",
        value: "1688"
      },
      {
        label: "拼多多",
        value: "拼多多"
      },
      {
        label: "淘宝",
        value: "淘宝"
      },
      {
        label: "京东",
        value: "京东"
      },
      {
        label: "其他",
        value: "其他"
      }
    ],
  },
  {
    label: '供应商',
    code: 'supplier',
    type: 'input'
  },
  {
    label: '采购日期',
    code: 'purchaseDate',
    type: 'dateRange'
  },
  {
    label: '商品名称',
    code: 'orderInfo',
    type: 'input'
  },
  {
    label: '采购人员',
    code: 'purchaseName',
    type: 'input'
  },
  {
    label: '入库仓库',
    code: 'storeId ',
    type: 'select'
  },
]
const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'detail',
    name: '详情'
  }
]);


const th = ref([
  {
    name: '采购订单',
    code: 'id',
    type: 'numberRanger',
    search: true
  },
  {
    name: '采购总价',
    code: 'totalPurchaseAmount',
    type: 'date',
    search: true
  },
  {
    name: '供应商',
    code: 'supplier',
    search: false
  },
  {
    name: '入库仓库',
    code: 'storeName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '采购渠道',
    code: 'purchasingChannels',
    search: false
  },
  {
    name: '渠道订单',
    code: 'channelOrder',
    search: false
  },
  {
    name: '采购部门/采购员',
    code: 'department',
    search: false
  },
  {
    name: '时间',
    code: 'createTime',
    width:"160px",
    date: true
  }
]);

const thSub = ref([
  {
    name: '图片',
    code: 'cover',
    type: 'numberRanger',
    search: true
  },
  {
    name: 'sku',
    code: 'sku',
    type: 'date',
    search: true
  },
  {
    name: '商品名称',
    code: 'productName',
    search: false
  },
  {
    name: '商品ID',
    code: 'productId',
    type: 'numberRanger',
    search: true
  },
  {
    name: '属性',
    code: 'property',
    search: false
  },
  {
    name: '采购单价（￥）',
    code: 'purchaseAmount',
    search: false
  },
  {
    name: '采购数量（件）',
    code: 'purchaseNumber',
    search: false
  },
]);

const dataList = ref<PurchaseAdvice[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {
  cover: null,
  sku: null,
  spec: null,
  name: null,
  productId: null,
  advice: null,
  occupy: null,
  stock: null,
  inTransit: null,
  noAuditInTransit: null,
}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  queryList();
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  detail({data}) {
    selectedRow.value = data.row;
    isShowDialog.value = true
  },
  pagination(){
    queryList()
  }
}

const queryList = async () => {
  let res = await PurchaseOrderApi.getPurchaseOrderPage(queryParams.value);
  console.log(res, "==")
  dataList.value = res.list || [];
  total.value = res.total;
}

onMounted(() => {
  queryList();
})


</script>
<style lang="scss" scoped>

</style>
